<template>
    <div class="main merchant-base-list">
        <section>
            <div v-if="rightsButtons['export']" class="btn-block">
                <el-button type="success" plain size="small">下载excel模板</el-button>
                <el-upload ref="importRef" accept=".xls,.xlsx" :show-file-list="false" style="display:inline-block;margin:0px 10px 0 10px" :action="''" :limit="1" :http-request="importExcel">
                    <el-button size="small" plain type="success">导入创建商家</el-button>
                </el-upload>
                <el-button type="success" plain size="small" @click="exportMerToE3">导出E3格式商家数据</el-button>
                <el-button type="success" plain size="small" @click="exportCkToE3">导出E3格式商家仓库数据</el-button>
                <el-button type="success" plain size="small" @click="exportMerToBX">导出碧选格式商家数据</el-button>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/>
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="商家名称：" prop="merchant_name">
                        <el-input @keyup.enter.native="search" v-model="listQuery.merchant_name" placeholder="商家名称" maxlength="50" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="招商经理：" prop="join_person">
                        <el-select v-model="listQuery.join_person" :clearable="true">
                            <el-option v-for="item in joinPersons" :key="item.id" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table type="selection" @selection-change="selectionChange" :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="center" prop="accountId" label="商家编码" min-width="100"></el-table-column>
                <el-table-column align="center" prop="companyName" label="商家名称" min-width="100"></el-table-column>
                <el-table-column align="center" prop="joinPerson" label="招商经理" min-width="100"></el-table-column>
                <el-table-column align="center" prop="contact" label="业务联系人" min-width="100"></el-table-column>
                <el-table-column align="center" prop="mobile" label="手机号" min-width="100"></el-table-column>
                <el-table-column align="center" prop="applyTime" label="申请时间" width="100">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.applyTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="auditTime" label="审核时间" width="100">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.auditTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="220" >
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['view']" type="success" size="mini" @click="operate('view', 'jumpFromBaseInfoList', scope.row.processId)" plain>查看</el-button>
                        <el-button v-if="rightsButtons['edit']" type="success" size="mini" @click="operate('modify', 'jumpFromBaseInfoList', scope.row.processId)" plain>修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.page_size"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>
  import {joinPerson, merchantList, exportE3FormatMerchant, exportE3FormatMerchantCk, exportBXFormatMerchant, importMerchant } from '@/api/merchantsys/merchant'
    export default {
        name: 'merchantBase',
        data() {
            return {
                joinPersons:[],
                list: [],
                listQuery: {
                    merchant_name: '',
                    join_person: '',
                    page: 1,
                    page_size: 10
                },
                pList: [],
                listTotal: 0,
                listLoading: false,
                loading:false,
                accountIdList:[]
            }
        },
        created() {
            this.fetchJoinPerson()
            this.getList()
        },
        methods: {
            //选择要导出的具体数据
            selectionChange(item) {
                this.accountIdList = []
                item.map(k => {
                    this.accountIdList.push(k.accountId)
                })
            },
            //导入创建商家数据
            importExcel(params) {
                let fd = new FormData()
                fd.append('file', params.file)
                this.$refs.importRef.clearFiles()
                const res = importMerchant(fd).then(res=>{
                    this.downloadFile(res, '导入商家数据处理结果.xlsx')
                })
            },
            //导出E3格式商家数据
            exportMerToE3() {
                exportE3FormatMerchant({ accountIdList: this.accountIdList }).then(res=>{
                    this.downloadFile(res, 'E3格式商家数据.xlsx')
                })
            },
            //导出E3格式商家仓库
           exportCkToE3() {
                exportE3FormatMerchantCk({ accountIdList: this.accountIdList }).then(res=>{
                    this.downloadFile(res, 'E3格式仓库档案数据.xlsx')
                })
            },
            //导出E3格式商家数据
            exportMerToBX() {
                exportBXFormatMerchant({ accountIdList: this.accountIdList }).then(res=>{
                    this.downloadFile(res, '碧选格式商家数据.xlsx')
                })
            
            },
            operate(type, origin, processId) {
                this.$router.push({ path: '/merchant/base/detail/' + processId, query: { type: type, origin: origin } })
            },
            //招商人员
            fetchJoinPerson() {
                joinPerson().then(res => {
                    if (res.code == 200 && res.data) {
                        res.data.forEach(element => {
                            this.joinPersons.push({ label: element.joinName, value: element.joinCode })
                        })
                    }
                })
            },
            //请求商家列表数据
            getList() {
                this.listLoading = true;
                merchantList({
                    merchant_name: this.listQuery.merchant_name,
                    join_person: this.listQuery.join_person,
                    page: this.listQuery.page,
                    page_size: this.listQuery.page_size
                }).then(res => {
                    this.list = res.data.data;
                    this.listTotal = res.data.total;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                })
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            // 搜索
            search() {
                this.listQuery.page = 1;
                this.getList();
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.page_size = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.page = page;
                this.getList();
            },
        }
    }
</script>

<style lang="scss">
  
</style>
